import { defineComponent, computed } from "vue";
import "./index.less";

export default defineComponent({
    name: "MeIcon",
    props: {
        name: {
            type: String,
            required: true,
            // 图标的名称，必填项，用于指定要显示的图标
        },
        class: {
            type: String,
            default: "",
            // 自定义类名，用于添加额外的样式类
        },
        color: {
            type: String,
            default: "",
            // 图标的颜色，可以是任何有效的CSS颜色值
        },
        size: {
            type: [String, Number],
            default: "1em",
            // 图标的大小，可以是数字或字符串，默认为1em
        },
        spin: {
            type: [Boolean, Object],
            default: false,
            // 控制图标旋转效果，可以是布尔值或配置对象
            // 为true时使用默认旋转配置，为对象时可自定义旋转参数
        },
        angle: {
            type: [String, Number],
            default: 0,
            // 静态旋转角度，单位为度，默认为0度不旋转
        },
        onClick: {
            type: Function,
            default: null,
            // 点击图标时触发的回调函数
        },
        onHover: {
            type: Function,
            default: null,
            // 鼠标悬停在图标上时触发的回调函数，接收事件对象和悬停状态
        },
    },
    setup(props, { attrs, emit }) {
        // spinConfig: 计算属性，处理旋转配置
        // 根据props.spin的值生成完整的旋转配置对象
        const spinConfig = computed(() => {
            // defaultConfig: 默认旋转配置
            const defaultConfig = {
                enable: false, // 是否启用旋转
                speed: "normal", // 旋转速度：slow(慢)、normal(正常)、fast(快)
                degree: 360, // 旋转角度，默认360度完整旋转
                reverse: false, // 是否反向旋转
            };

            // 根据props.spin的类型返回不同的配置
            if (props.spin === true) {
                return { ...defaultConfig, enable: true };
            } else if (typeof props.spin === "object") {
                return {
                    ...defaultConfig,
                    enable: true,
                    ...props.spin,
                };
            }
            return defaultConfig;
        });

        // svgClass: 计算属性，生成SVG元素的类名
        // 包含基础类名和旋转相关的类名
        const svgClass = computed(() => {
            const baseClass = `me-icon ${props.class || ""}`.trim();
            const spinClass = spinConfig.value.enable
                ? `me-icon-spin me-icon-spin-${spinConfig.value.speed} ${spinConfig.value.reverse ? "me-icon-spin-reverse" : ""}`
                : "";
            return `${baseClass} ${spinClass}`.trim();
        });

        // iconStyle: 计算属性，生成图标的样式对象
        // 处理静态角度旋转和动态旋转的CSS样式
        const iconStyle = computed(() => {
            const style = {};

            // 处理静态角度旋转
            if (props.angle && !spinConfig.value.enable) {
                style.transform = `rotate(${props.angle}deg)`;
            }

            // 处理动态旋转
            if (spinConfig.value.enable && spinConfig.value.degree !== 360) {
                style["--spin-degree"] = `${spinConfig.value.degree}deg`;
            }

            return style;
        });

        // handleMouseEnter: 处理鼠标进入事件的函数
        // 调用props.onHover回调并发出mouseenter事件
        const handleMouseEnter = (event) => {
            if (props.onHover) {
                props.onHover(event, true);
            }
            emit("mouseenter", event);
        };

        // handleMouseLeave: 处理鼠标离开事件的函数
        // 调用props.onHover回调并发出mouseleave事件
        const handleMouseLeave = (event) => {
            if (props.onHover) {
                props.onHover(event, false);
            }
            emit("mouseleave", event);
        };

        // handleClick: 处理点击事件的函数
        // 调用props.onClick回调并发出click事件
        const handleClick = (event) => {
            if (props.onClick) {
                props.onClick(event);
            }
            emit("click", event);
        };

        // 返回渲染函数
        return () => (
            <svg
                class={svgClass.value} // SVG的类名
                style={iconStyle.value} // SVG的样式
                width={props.size} // SVG的宽度
                height={props.size} // SVG的高度
                aria-hidden="true" // 无障碍属性，对屏幕阅读器隐藏
                onClick={handleClick} // 点击事件处理函数
                onMouseenter={handleMouseEnter} // 鼠标进入事件处理函数
                onMouseleave={handleMouseLeave} // 鼠标离开事件处理函数
                {...attrs} // 透传其他属性
            >
                <use xlinkHref={`#icon-${props.name}`} fill={props.color} />
            </svg>
        );
    },
});
